<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="col-md-6 col-lg-4">
        <div class="form-horizontal">
          <div class="form-group">
            <div class="col-md-8 col-sm-10">
              <input type="text"
                     v-model="roleInfo.roleName"
                     class="form-control"
                     placeholder="角色名称">
            </div>
            <button type="button"
                    @click="roleModelShow('A', '')"
                    class="btn btn-default btn-theme addBtn2">新增</button>
            <button type="button"
                    @click="searchRoleResource"
                    class="btn btn-default btn-theme">查询</button>
          </div>
        </div>
      </div>
    </div>
    <div class="table-responsive report-table">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th width="20%">序号</th>
            <th width="35%">角色名称</th>
            <th width="40%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in roleRows">
            <td>{{index + 1}}</td>
            <td>{{row.roleName}}</td>
            <td>
              <a href="javascript:void(0)"
                 @click="roleModelShow('U', row.id)"
                 class="btnA edit">编辑</a>
              <a href="javascript:void(0)"
                 @click="delRoleResource(row.id)"
                 class="btnA edit">删除</a>
              <a href="javascript:void(0)"
                 @click="authModelShow(row.id, row.roleName)"
                 class="btnA edit">授权</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="laypage_div"></div>
    <addRoleModal :roleModal="roleInfo"
      @saveRoleListener='saveRoleReturn'></addRoleModal>
    <roleAuthorized :roleId="roleId"
      :roleName="roleName"></roleAuthorized>
  </div>
</template>

<script>
import addRoleModal from "./addRole.vue";
import roleAuthorized from "./roleAuthorized.vue";

export default {
  data() {
    return {
      loginInfo: {
        userId: window.localStorage.getItem("userId"),
        isLogin: window.localStorage.getItem("isLogin")
      },
      roleRows: [],
      roleInfo: {
        roleId: "",
        roleName: "",
        optType: "",
        time: ""
      },
      roleId: "",
      roleName: "",
      pageInfo: {
        pageNo: 1,
        pageSize: 10
      },
    };
  },
  components: {
    addRoleModal,
    roleAuthorized
  },
  mounted: function () {
    this.initRoleResource();
  },
  methods: {
    initRoleResource() {
      var _self = this;
      var params = {};
      params["roleName"] = _self.roleInfo.roleName;
      params["pageNo"] = _self.pageInfo.pageNo;
      params["pageSize"] = _self.pageInfo.pageSize;
      params["roleOrigin"] = "2";
      var body = {};
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/getChannelRolePage";
      _self.$http.post(url, body).then(
        (response) => {
          var data = response.body.resData;
          var result = data.result;
          var totalPages = data.channelRoleListPage.totalPages;
          if ("1" == result) {
            var rows = data.channelRoleListPage.rows;
            _self.roleRows = rows;
          }
          //加载分页组件
          layui.laypage.render({
            cont: $("#laypage_div"), //容器。值支持id名、原生dom对象，jquery对象,
            curr: _self.pageInfo.pageNo,
            pages: totalPages, //总页数
            skip: true, //是否开启跳页
            skin: "#f87242",
            groups: 3, //连续显示分页数
            jump: function (obj, first) {
              if (!first) {
                _self.pageInfo.pageNo = obj.curr;
                _self.initRoleResource();
              }
            }
          });
        },
        (response) => {}
      );
    },
    searchRoleResource() {
      this.pageInfo.pageNo = 1;
      this.initRoleResource();
    },
    roleModelShow(optType, id) {
      this.roleInfo.roleId = id;
      this.roleInfo.optType = optType;
      this.roleInfo.time = new Date().getMilliseconds();
      $("#addRoleModal").modal("show");
    },
    saveRoleReturn() {
      this.initRoleResource();
    },
    delRoleResource(id) {
      var _self = this;
      var params = {};
      params["id"] = id;
      layer.confirm(
        "您是否要删除该角色？",
        {
          btn: ["确定删除", "再考虑考虑"] //按钮
        },
        function () {
          var url = _self.utilHelper.apiUrl + "/api/delChannelRole";
          var body = {};
          body.params = params;
          _self.$http.post(url, body).then(
            (response) => {
              var data = response.body.resData;
              var result = data.result;
              var resData = data.resultMsg;
              //输出操作信息
              layer.msg(
                resData,
                {
                  time: 1000
                },
                function () {
                  if ("1" == result) {
                    _self.initRoleResource();
                  }
                }
              );
            },
            (response) => {}
          );
        },
        function () {}
      );
    },
    authModelShow(roleId, roleName) {
      this.roleId = roleId;
      this.roleName = roleName;
      $("#roleAuthorized").modal("show");
    }
  }
};
</script>
